<template>
  <div class="about">
    <h1 v-for="(item, index) in list.data" :key="index">
      {{item.username}}
      {{item.password}}
      {{item.nickname}}
    </h1>

    <!-- 分页 -->
    <Pagination
      @current-change="handleCurrentChange"
      :page-size="size"
      background
      layout="total, prev, pager, next"
      :total="total"
    ></Pagination>
    <Button>提交</Button>
  </div>
</template>
<script>
import { Button, Pagination } from "element-ui";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      size: 2
    };
  },
  components: {
    Button,
    Pagination
  },
  methods: {
    ...mapActions(["getAllData"]),
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 每次点击按钮的时候，要请求一次数据。数据现在在vuex，所以需要触发action
      let pageObj = {
        page: val - 1,
        size: this.size
      };
      this.getAllData(pageObj);
    }
  },
  computed: {
    ...mapState(["list", "total"])
  },
  mounted() {
    // 进入页面，触发action。实现请求数据
    this.getAllData({ page: 0, size: this.size });
  }
};
</script>
<style lang="scss">
</style>
